<template>
  <div class="box1">
    <!-- 头部 -->
    <div class="head">
      <span>角色名称：</span><el-input v-model.trim="foot.name" />
      <span>描述信息：</span><el-input v-model.trim="foot.desc" />
      <el-button type="primary" @click="add()">添加</el-button>
    </div>
    <!-- 表格数据 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="角色名称"  />
      <el-table-column prop="desc" label="说明"  />
      <el-table-column label="操作" >
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="handleDelete(scope.$index, scope.row)"
            >授权</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <PaginAtion
      class="dins"
      v-bind="paging"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    ></PaginAtion>
    <!-- 修改对话框 -->
        <el-dialog v-model="dialogVisible" title="修改" width="45%" :before-close="handleClose">
        <span>角色名称：</span>
			<el-input v-model.trim="uodata.name" class="lefts"/>
			<span>描述信息：</span>
			<el-input v-model.trim="uodata.desc" class="rights"/>
			<el-button type="primary" @click="amend()" class="modification">修改</el-button>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="dialogVisible = false">确定</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 授权对话框 -->
		<el-dialog v-model="dialogVisibles" title="授权" width="30%" :before-close="handleClose">
			<!-- 树形控件 -->
            <el-tree :props="props"  show-checkbox  :data="data" :default-checked-keys="assignedPermissions" 
            node-key="id"
            ref="tree"
            />
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisibles = false">取消</el-button>
					<el-button type="primary" @click="sure()">确定</el-button>
				</span>
			</template>
		</el-dialog>
  </div>
</template>
<script>
import PaginAtion from "@/Subassembly/PaginAtion";
import http from "@/http";
import { ElMessage as $msg } from "element-plus";
export default {
  components: {
    PaginAtion,
  },
  data() {
    return {
      tableData: [],
      dialogVisible: false, //修改对话框
      dialogVisibles:false, //授权对话框
      title: "",
      paging: {
        page: 1, //默认第一页
        limit: 10, //显示几页
        total: "",
      },
      //添加传值的对象
      foot: {
        name: "",
        desc: "",
      },
      //修改传值的对象
      uodata: {
        id: "",
        name: "",
        desc: "",
      },
      props:{
        children: 'children', 
        label: 'label', //指定节点
        
      },
      data:[],
      assignedPermissions:[]
    };
  },
  created() {
    this.rele();
  },
  methods: {
    rele() {
      let data = {
        _gp: "admin.role",
        _mt: "list",
        page: this.paging.page,
        limit: this.paging.limit,
      };
      //角色页面
      http.get(data).then((res) => {
        console.log(res);
        if (res.errno == 200) {
          this.paging.total = res.data.count; //获取数据总页
          this.tableData = res.data.items; //存放数据
        }
      });
    },
        //添加角色
    add() {
      if (this.foot.name == "") {
      return  $msg.error({ message: "名称不能为空" });
      }else if(this.foot.desc == ""){
        return  $msg.error({ message: "信息不能为空" });
      }
      let addtion = {
        _gp: "admin.role",
        _mt: "create",
        role: JSON.stringify(this.foot),
      };
      http.post(addtion).then((res) => {
        console.log(res);
        if (200 == res.errno) {
          $msg.success({ message: "添加成功" });
          this.rele()
          this.foot = this.$options.data().foot;
        }
      });
    },
    //点击传值事件
    handleEdit(index, row) {
      this.dialogVisible = true;
      this.uodata.id = row.id;
      this.uodata.name = row.name;
      this.uodata.desc = row.desc;
    },
    //修改事件
    amend() {
        if(this.uodata.name==""){
        return  $msg.error({ message: "名称不能为空" });
        }else if(this.uodata.desc==""){
        return  $msg.error({ message: "信息不能为空" });
        }
      let updatas = {
        _gp: "admin.role",
        _mt: "update",
        role: JSON.stringify(this.uodata),
      };
      http.post(updatas).then((res) => {
        console.log(res);
        if (res.errno == 200) {
          $msg.success({ message: "修改成功" });
          this.rele()
          this.dialogVisible = false;
        }
      });
    },
    //点击授权
    handleDelete(index,row){
        this.dialogVisibles = true
        this.id = row.id
       let authorization = {
            _gp: "admin.role",
            _mt: "permissionList",
            roleId:row.id
       }
       http.post(authorization).then((res)=>{
           console.log(res);
           if(200==res.errno){
               
               this.data = res.data.systemPermissions   //展示节点数据
               this.assignedPermissions = res.data.assignedPermissions  
           }
       })
    },
    // 配置权限
    sure(){
        this.dialogVisibles = false
        let configuration = {
            _gp:"admin.role",
            _mt:"permissionSet",
            roleSetPermissionDTO:JSON.stringify({
                roleId:this.id,
                permissions:this.$refs.tree.getCheckedKeys(true)
            })
        }
        http.post(configuration).then((res)=>{
            console.log(res);
            if(200==res.errno){
                 $msg.success({ message: "配置成功" });
                 this.rele()
                 this.assignedPermissions = []
                 this.dialogVisibles = false
            }
        })
    },

    //分页组件
    handleSizeChange(val) {
      this.paging.limit = val;
      this.rele();
    },
    handleCurrentChange(val) {
      this.paging.page = val;
      this.rele();
    },

  },
};
</script>
<style lang="less" scoped>
.box1 {
  .head {
    /deep/ .el-input {
      display: inline-block;
      width: 180px;
      margin-bottom: 20px;
    }
    /deep/ .el-input__inner {
      display: inline-block;
      width: 160px;
    }
    span {
      display: inline-block;
    }
  }
  /deep/ .lefts{
      width: 160px;
      display: inline-block;
  }
    /deep/ .rights{
      width: 160px;
      display: inline-block;
  }
  .modification{
      margin-left: 15px;
  }
  //组件样式
  .dins {
    margin-top: 10px;
  }
}
</style>
